<script>
import {defineComponent} from 'vue'
import * as echarts from 'echarts'
import {handleError, handleSuccess} from "@/util/request";

export default defineComponent({
  name: "MaterialStatisticsPage",
  data() {
    return {

      tableData: [],
      // 查询参数: 物资名称 (绑定输入框, 让用户输入, 发给后端)
      materialName: null,
      // 查询参数: 年份
      year: null,
      month: null,
      // 查询参数: 类型
      type: null,
      viewName: 'tableView'
    }
  },

  methods: {  // 请求表格数据
    getTableData () {
      let params = {
        year: this.year,
        month: this.month,
      }
      this.$http.get('/material/statistic', {params})
          .then((result)=> {
            const data = handleSuccess(result)
            if (data) {
              this.tableData = data
              if (this.viewName == 'echartsView') {
                this.refreshEcharts()
              }
            }
          })
          .catch((error)=> {
            handleError(error)
          })
    },
    // 第四步: 定义一个刷新图表的方法
    refreshEcharts() {
      // 第五步: 初始化图表容器
      const myChart = echarts.init(document.getElementById("my-chart"), 'dark')
      // 定义标题
      const title = `${this.year}年${this.month}月物资出入库统计`
      // 定义分类
      const categoryData = []
      // 定义出库数据
      const outData = []
      // 定义入库数据
      const intData = []
      for (let i = 0; i < this.tableData.length; i++) {
        let item = this.tableData[i]
        if (categoryData.indexOf(item.materialName) == -1) {
          categoryData.push(item.materialName)
        }
        if (item.type == '出库') {
          outData.push(item.sum)
        }
        if (item.type == '入库') {
          intData.push(item.sum)
        }
      }
      const option = {
        title: {
          text:title
        },
        legend: {
          data: ['出库数量', '入库数量']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'category',
          data: categoryData
        },
        xAxis: {
          type: 'value'
        },
        series: [
          {
            name:'出库数量',
            type:'bar',
            data:outData
          },
          {
            name:'入库数量',
            type:'bar',
            data:intData
          },
        ]
      }
      // 给图表配置option对象
      myChart.setOption(option)
    },
    // 处理查询按钮事件
    handleSearch() {
      this.getTableData()
    },
    // 处理重置按钮事件
    reset() {
      this.year = null
      this.month = null
      this.tableData = []
      this.viewName = 'tableView'
    },
    // 切换标签页触发
    handleTabClick(tab) {
      if (tab.name == 'echartsView') {
        this.refreshEcharts()
      }
    }
  },
  created() {

  }
})
</script>

<template>
  <el-card class="box-card">
    <!-- 卡片标题 -->
    <div slot="header" class="clearfix">
      <span>物资出入库统计</span>
    </div>
    <el-form class="el-form--inline" label-position="left">
      <el-form-item label="年份">
        <el-date-picker v-model="year" type="year" value-format="yyyy" placeholder="请选择年份"/>
      </el-form-item>

      <el-form-item label="月份">
        <el-date-picker v-model="month" type="month" value-format="MM" placeholder="请选择月份"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="viewName" @tab-click="handleTabClick">
      <el-tab-pane label="表格视图" name="tableView">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="年度-月度" width="280px">
            <template>
              {{ year }} 年 {{ month }} 月
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="物资名称" width="280"/>
          <el-table-column prop="type" label="出库/入库" width="280"/>
          <el-table-column prop="count" label="次数" width="280"/>
          <el-table-column prop="sum" label="数量" width="280"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="可视化视图" name="echartsView">
        <div id="my-chart" style="width: 1000px;height: 600px">

        </div>
      </el-tab-pane>
    </el-tabs>

  </el-card>
</template>

<style scoped>

</style>